<template>
  <div class="layout-main-conent">
    <a-card
      :bordered="false"
      style="margin-bottom: 15px"
      :bodyStyle="{ paddingBottom: '0' }"
    >
      <a-form :labelCol="{ span: 6, offset: 0 }" :wrapper-col="{ span: 18 }">
        <a-row :gutter="16">
          <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <a-form-item label="应用编码">
              <a-input
                placeholder="请输入"
                v-model:value="searchModelRef.appCode"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <a-form-item label="组件名称">
              <a-input
                placeholder="请输入"
                v-model:value="searchModelRef.name"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6"> </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <div class="text-align-right" style="padding-bottom: 24px">
              <a-button type="primary" @click="searchFormSubmit">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchResetFields"
                >重置</a-button
              >
            </div>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card :bordered="false" class="table-card">
      <template #extra>
        <a-button type="primary" @click="() => setCreateFormVisible(true)"
          >新建</a-button
        >
      </template>
      <a-table
        row-key="id"
        :columns="columns"
        :data-source="list"
        :loading="loading"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'icon'">
            <img style="width: 30px; height: 30px" :src="record.icon" />
          </template>
          <template v-else-if="column.key === 'action'">
            <a-button type="link" @click="() => detailUpdateData(record.id)"
              >编辑</a-button
            >
            <a-button
              type="link"
              @click="() => deleteTableData(record)"
              class="delete-button"
              >删除</a-button
            >
          </template>
          <template v-else-if="column.key === 'enableStatus'">
            <a-switch
              v-model:checked="record.enableStatus"
              checked-children="ON"
              un-checked-children="OFF"
              @change="switchStatus(record)"
            />
          </template>
        </template>
      </a-table>
    </a-card>
    <create-form
      :visible="createFormVisible"
      :onCancel="() => setCreateFormVisible(false)"
      :onSubmitLoading="createSubmitLoading"
      :onSubmit="createSubmit"
    />

    <update-form
      v-if="updateFormVisible"
      :visible="updateFormVisible"
      :values="updateRoleData"
      :onCancel="() => updataFormCancel()"
      :onSubmitLoading="updateSubmitLoading"
      :onSubmit="updateSubmit"
    />
    <delete-modal
      :visible="deleteVisible"
      :onCancel="() => (deleteVisible = false)"
      :onSubmit="deleteSubmit"
    />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { message, Modal } from "ant-design-vue";

import CreateForm from "./components/CreateForm.vue";
import UpdateForm from "./components/UpdateForm.vue";
import { TableListItem } from "./data";
import {
  queryList,
  detailData,
  createData,
  updateData,
  removeData,
  switchData,
} from "./service";
import DeleteModal from "@/views/component/DeleteModal.vue";

const deleteVisible = ref(false);
const selectedRecord = ref({});
const deleteSubmit = async () => {
  const res = await removeData([selectedRecord.value.id]);
  if (res.success) {
    getList(pagination.value.current);
    message.success("删除成功");
  }
  deleteVisible.value = false;
};
// 列表分页
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0, // 假设总共有100条数据
  showTotal: (total) => `共 ${total} 条数据`,
  onChange: (page, pageSize) => {
    // 分页改变时的回调函数
    pagination.value.current = page;
    pagination.value.pageSize = pageSize;
    getList(page);
  },
  showSizeChanger: true,
  showQuickJumper: true,
});
// 列表字段
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: 80,
    customRender: ({ text, index }: { text: any; index: number }) =>
      (pagination.value.current - 1) * pagination.value.pageSize + index + 1,
  },
  {
    title: "应用编码",
    dataIndex: "appCode",
  },
  {
    title: "应用名称",
    dataIndex: "name",
  },
  {
    title: "英文名称",
    dataIndex: "nameEn",
  },
  {
    title: "地址",
    dataIndex: "url",
  },
  {
    title: "icon",
    dataIndex: "icon",
  },
  {
    title: "状态",
    dataIndex: "enableStatus",
    key: "enableStatus",
  },
  {
    title: "操作",
    key: "action",
    width: 240,
  },
];
const switchStatus = async (record) => {
  const req = {
    id: record.id,
    enableStatus: record.enableStatus ? "1" : "0",
  };
  const res = await switchData(req);
  if (res.success) {
    message.success("状态修改成功！");
  }
};
// 获取数据
const list = ref([]);
const loading = ref<boolean>(true);
const getList = async (current: number): Promise<void> => {
  loading.value = true;
  const params = {
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize,
    ...searchModelRef.value,
  };
  const res = await queryList(params);
  if (res.success) {
    list.value = res.data.records;
    list.value.forEach((ele) => {
      ele.enableStatus = ele.enableStatus === "1";
    });
    pagination.value.total = res.data.total;
  }
  loading.value = false;
};
// 表单值
const searchModelRef = ref({
  appCode: "",
  name: "",
});
// 搜索
const searchFormSubmit = async () => {
  getList(1);
};
const searchResetFields = async () => {
  searchModelRef.value = {
    appCode: "",
    name: "",
  };
  searchFormSubmit();
};
// 新增弹框 - visible
const createFormVisible = ref<boolean>(false);
const setCreateFormVisible = (val: boolean) => {
  createFormVisible.value = val;
};
// 新增弹框 - 提交 loading
const createSubmitLoading = ref<boolean>(false);
// 新增弹框 - 提交
const createSubmit = async (values: Omit<TableListItem, "id">) => {
  createSubmitLoading.value = true;
  const res = await createData(values);
  if (res.success) {
    setCreateFormVisible(false);
    message.success("新增成功！");
    getList(1);
  }
  createSubmitLoading.value = false;
};
// 编辑弹框 data
const updateRoleData = ref({});
const detailUpdateData = async (id: any) => {
  const params = {
    id: id,
  };
  const res = await detailData(params);
  if (res.success) {
    updateRoleData.value = res.data;
    setUpdateFormVisible(true);
  }
};
// 编辑弹框 - visible
const updateFormVisible = ref<boolean>(false);
const setUpdateFormVisible = (val: boolean) => {
  updateFormVisible.value = val;
};
const updataFormCancel = () => {
  setUpdateFormVisible(false);
};
// 编辑弹框 - 提交 loading
const updateSubmitLoading = ref<boolean>(false);
// 编辑弹框 - 提交
const updateSubmit = async (values: TableListItem) => {
  updateSubmitLoading.value = true;
  const res = await updateData(values);
  if (res.success) {
    updataFormCancel();
    message.success("编辑成功！");
    getList(pagination.value.current);
  }
  updateSubmitLoading.value = false;
};
// 删除
const deleteTableData = (record) => {
  deleteVisible.value = true;
  selectedRecord.value = record;
  // Modal.confirm({
  //     title: '删除',
  //     content: '确定删除吗？',
  //     okText: '确认',
  //     cancelText: '取消',
  //     onOk: async () => {
  //         const ids = [id]
  //         const res = await removeData(ids)
  //         if (res.success) {
  //             message.success('删除成功！');
  //             getList(pagination.value.current);
  //         }
  //     }
  // });
};
onMounted(() => {
  getList(1);
});
</script>
<style scoped lang="less">
.delete-button {
  color: red;
}
.role-manager {
  margin-right: 20px;
}
.table-card {
  :deep(.ant-card-body) {
    padding: 0px 24px 24px 24px;
  }
}
:deep(.ant-card-head) {
  border: none;
}
</style>
